<html>
    <head>
        <title>Test</title>
        <style>

button.custom {
  appearance:none;
  background-color:gold;
  color:red;
  padding:0.5em 1em;
}

button.custom:hover {
  background-color:yellow;
}

button.custom:checked {
  background-color:black; 
  color:white;
}


        </style>
        <script></script>
    </head>
    <body>
      <p>button, default styling: <button>test</button></p>
      <p>button, custom styling: <button.custom>test</button></p>
      <p>button|checkbox, custom styling: <button.custom|checkbox>Checkbox</button></p>
    </body>
</html>